<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			
		</div>
		
		<!-- 1.2、在js外部，使用template标签编写html代码 -->
		<!-- 
			注意事项：
				1、使用template标签；
				2、template标签需要定义id，用于组件的调用
				3、template标签的内部，必须定义根标签div，所有的html代码全写到div标签的内部
		-->
		<template id="addNumTemplate">
			<div>
				<a v-text="username"></a>
				<a v-text="age"></a>
			</div>
		</template>
		
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			//1、创建组件化
			Vue.component("addNumberComponent",{
				//1.1、定义data区
				data: function(){
					return{
						username: zhangsan,
						age: 18
					}
				},
				//1.2、定义模板区(通过组件化的id，引入外部的html代码)
				template: "#addNumTemplate"
				methods:{}
			})
			
			
			
			const vue =  new Vue({
				el: "#app",
				data: {},
				methods: {},
				mounted() {
					
				}
			})
		</script>
		
	</body>
</html>
